<template>
  <i class="time">{{ time }}</i>
</template>

<script>
export default {
  data() {
    return {
      time: null,
      interval: null
    }
  },
  created() {
    this.interval = setInterval(this.getTime, 1000)
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    getTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = (now.getMonth() + 1).toString().padStart(2, 0)
      const day = now
        .getDate()
        .toString()
        .padStart(2, 0)
      const hour = now
        .getHours()
        .toString()
        .padStart(2, 0)
      const minute = now
        .getMinutes()
        .toString()
        .padStart(2, 0)
      const second = now
        .getSeconds()
        .toString()
        .padStart(2, 0)
      this.time = `${year}-${month}-${day} ${hour}:${minute}:${second}`
    }
  }
}
</script>

<style lang="scss" scoped>
.time {
  font-style: normal;
}
</style>
